<!-- 电费账单 缴纳欠费 -->
<template>
	<view class="busines-mod">
		<userinfoTop :yhbh="yhbh" :show="false" />
	</view>
	<uni-card :is-shadow="false" spacing="0" margin="6" v-for="(item,index) in listData.yhqfmx" :key="index">
		<view class="dfzd-payover-item">
			<uni-section :title="item.zwyf + ''" type="line"></uni-section>
			<view class="p20">
				<view class="text-left-right">
					<text class="text-name">欠电费:</text>
					<text>{{ item.dqqf}}</text>
				</view>
				<view class="text-left-right">
					<text class="text-name">违约金:</text>
					<text>{{moneyUtils(item.yswyj)}}</text>
				</view>
				<view class="text-left-right">
					<text class="text-name">应缴合计:</text>
					<text>{{moneyUtils(item.yswyj + item.dqqf)}}</text>
				</view>
			</view>
			<button @click="payClick" type="primary" size="mini" style="width: 100%; padding: 5rpx;">立即缴费</button>
		</view>
	</uni-card>
	<cNoData v-if="listData.yhqfmx.length < 1" />
	
	<uni-popup ref="paypopup" type="bottom" border-radius="10px 10px 0 0">
		<view class="paypopup-dom">
			<view class="text-left-right">
				<text class="text-name">户名:</text>
				<text>dqqf</text>
			</view>
			<view class="text-left-right">
				<text class="text-name">户号:</text>
				<text>dqqf</text>
			</view>

			<view class="text-left-right">
				<text class="text-name">欠电费:</text>
				<text>dqqf</text>
			</view>
			<view class="text-left-right">
				<text class="text-name">户名:</text>
				<text>dqqf</text>
			</view>
			<view class="text-left-right">
				<text class="text-name">预付余额:</text>
				<text>dqjy</text>
			</view>
			<view class="text-left-right">
				<text class="text-name">应收违约金:</text>
				<text>yjhj</text>
			</view>
			<view class="text-left-right">
				<text class="text-name">合计金额:</text>
				<text>yjhj</text>
			</view>
			<view class="text-left-right">
				<text class="text-name">实缴金额:</text>
				<text>yjhj</text>
			</view>
			<view class="text-left-right">
				<text class="text-name">最小缴费金额:</text>
				<text>yjhj</text>
			</view>
			<button type="primary" size="mini" style="width: 100%; padding: 5rpx;">立即缴费</button>
		</view>
	</uni-popup>
	
</template>

<script setup lang="ts">
	import cNoData from "@/pages/bspsd/components/no-data.vue";
	import userinfoTop from "@/pages/bspsd/components/userinfo-top";
	import { moneyUtils } from "@/utils/index";
	import { getWxgzhYhqfsj } from "@/api/request/getWxgzhYhqfsj";
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	let paypopup = ref()
	let yhbh = ref("")
	let listData = ref({
		yhqfmx : []
	})
	onLoad((option) => {
		yhbh.value = option.yhbh
		getListData()
	});
	function getListData() {
		getWxgzhYhqfsj({
			data: {
				yhbh: yhbh.value,
			},
			success: (res) => {
				listData.value = res
			},
			fail: (code, message) => {
				console.log(code, message)
			}
		})
	}

	function payClick() {
		paypopup.value.open()
	}
</script>

<style lang="scss" scoped>
	.dfzd-payover {
		.dfzd-payover-head {
			padding: 10px 80rpx 40rpx;
			background: #00b1ff;
			line-height: 2;
			font-size: 28rpx;
			color: #fff;
		}

		.dfzd-dom-list {
			padding: 20px 40rpx;
			background: #fff;
			line-height: 2;
			font-size: 28rpx;
		}


	}

	.dfzd-payover-item {
		.dfzd-payover-item-title {
			display: inline-block;
			border-radius: 0 6rpx 6rpx 0;
			padding: 4rpx 20rpx;
			border-left: 4px solid #00b1ff;
			font-size: 28rpx;
			line-height: 1;
		}

		.describe {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 5px 0;
			line-height: 1.5;
			font-size: 26rpx;
			color: #323233;

			.describe-name {
				font-size: 28rpx;
			}
		}
	}

	.paypopup-dom {
		padding: 10px;
		border-radius: 8px 8px 0 0;
		background-color: rgb(241, 242, 247);
	}
</style>